<style>
    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        background: white;
        overflow: hidden;
        box-sizing: border-box;
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;

    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    #container .top {
        padding: 20px;
        box-sizing: border-box;
    }

    .top .video {
        height: 180px;
        width: 260px;
        float: left;
        position: relative;
    }

    .top .tag {
        padding: 20px;
        float: left;
    }

    /*播放按钮*/
    .top .video .btn {
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%)
    }

    .video .icon {
        width: 0;
        height: 0;
        border: 10px solid;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-15%, -50%);
        border-color: transparent transparent transparent white;
    }

    .top .tag .big-title {
        font-size: 16px;
    }

    .top .tag .small-title {
        margin-top: 10px;
        font-size: 12px;
    }

    .top .tag p {
        line-height: 30px;
    }

    .status-gray {
        background: grey;
        font-size: 12px;
        color: black;
        padding: 0 5px;
    }

    .status-select {
        background: #00a2d4;
        font-size: 12px;
        padding: 0 5px;
        color: black;
    }


    #container .bottom {
        clear: left;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 220px;
        bottom: 20px;
        overflow: hidden;
    }

    #container .bottom .content {
        position: absolute;
        right: 18%;
        left: 0;
        top: 0;
        bottom: 0;
        border: 1px solid #E3E3E3;
    }

    #container #info {
        position: absolute;
        right: 0;
        width: 16%;
        top: 0;
        bottom: 0;
        border: 1px solid #E3E3E3;
    }

    .tab a {
        line-height: 40px;
        width: 120px;
        display: inline-block;
        text-align: center;
    }

    a {
        color: black;
    }

    .tab a:hover {
        color: #00a2d4;
    }

    .tab-selected {
        border-bottom: 3px solid #00a2d4;
        color: #00a2d4;
    }

    #container #desc, #container #dict, #container #work {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-y: auto;
    }

    #container #desc {
        text-align: center;
    }

    #info #title {
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #E3E3E3;
    }

    #info #detail {
        box-sizing: border-box;
        padding: 20px;
    }

    #info #portrait {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
    }

    #info .detail {
        line-height: 30px;
    }

    #list span.title {
        line-height: 35px;
        font-size: 16px;
    }

    #list p.res {
        line-height: 40px;
        font-size: 14px;
        width: 400px;
        margin-left: 30px;
        margin-top: 10px;
        background: #f3f3f3;
        padding: 0 10px;
        cursor: pointer;
        border-radius: 5px;
    }

    #list p.res:hover {
        background: #e3e3e3;
    }

    #work p {
        line-height: 40px;
    }

    #btn-exam {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="top">
        <div class="video">
            <img id="cover" src="./res/images/index-header.jpg" style="width: 100%;height: 100%;border-radius: 5px">
            <div class="btn" id="btn-play">
                <div class="icon"></div>
            </div>
            <button class="layui-btn layui-btn-normal" id="btn-exam">开始考试</button>
        </div>
        <div class="tag">
            <p class="big-title" id="tag-title">平面设计系列课程-01</p>
            <p class="small-title" id="tag-time">开课时间：2019-12-20 10:00</p>
            <p class="small-title" id="tag-type">难度：简单</span></p>
            <p class="small-title" id="tag-download">文件下载:
                <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left: 20px">下载</button>
            </p>
        </div>
    </div>
    <div id="dir" class="bottom">
        <div class="content">
            <div class="tab" style="position: relative;border-bottom: 1px solid #E3E3E3">
                <a class="tab-selected" id="tab1">课程概述</a>
                <a id="tab2">课程目录</a>
                <a id="tab3">课程作业</a>
            </div>
            <div id="desc">
                <img src="./res/images/detail.jpg" style="width: 100%;height: auto">
            </div>
            <div id="dict" style="display: none">
                <ul id="list">
                    <li class="item"><span class="title">01 平面设计基础教程</span>
                        <p class="res" onclick="initVideo()"><i class="iconfont icon-bofang"></i>【录播】 01软件下载</p>
                    <li class="item"><span class="title">02 平面设计基础教程</span>
                        <p class="res" onclick="initLive()"><i class="iconfont icon-bofang"></i>【直播】 02软件下载</p></li>
                    <li class="item"><span class="title">03平面设计基础教程</span>
                        <p class="res" onclick="initExam()"><i class="iconfont icon-bofang"></i>【考试】 平面设计基础教程</p></li>
                    <li class="item"><span class="title">04 平面设计基础教程</span>
                        <p class="res" onclick="initExamOnline()"><i class="iconfont icon-bofang"></i>【在线考试】 平面设计基础教程
                        </p></li>
                </ul>
            </div>
            <div id="work">
                <p>1、制作一个杯子模型。</p>
                <p>2、制作一个杯子模型。</p>
                <p>3、制作一个杯子模型。</p>
                <p>4、制作一个杯子模型。</p>
                <p>5、制作一个杯子模型。</p>
                <p>6、制作一个杯子模型。</p>
                <p>7、制作一个杯子模型。</p>
            </div>
        </div>

        <div id="info">
            <div id="title">师资信息</div>
            <div id="detail">
                <p class="detail"><img src="./res/images/index-header.jpg" id="portrait" align="left">蓝兰
                    7岁开始学习钢琴，13岁考过钢琴十级，18岁跟随四川音乐学院钢琴系主任李晓琳学习。
                    中国传媒大学音乐编辑专业毕业
                    目前就职于重庆电视台，担任音乐编辑
                    从事钢琴教育多年，曾在刘诗昆钢琴学校担任高级老师，对教育教学非常有耐心
                    多位学生连续每年参加钢琴考级，获得优异成绩</p>
            </div>
        </div>
    </div>
</div>


<script>
    var parentId;
    var parentInfo;
    var type = 1; //1、录播2、直播3、考试4、在线考试
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;
        var form = layui.form;
        form.render();
        initPage();
        // parentId = getHashParam().id;
        // loadCourseData();
        // loadDirData();
    });

    //初始化界面数据
    function initPage() {
        switch (type) {
            case 1:
                // 录播
                initVideo();
                break;
            case 2:
                // 直播
                initLive();
                break;
            case 3:
                // 考试
                initExam();
                break;
            case 4:
                // 考试
                initExamOnline();
                break;
        }
    }

    function initVideo() {
        $('#btn-play').show();
        $('#btn-exam').hide();

        $('#tag-title').html('【录播】平面设计系列课程-01');
        $('#tag-time').html('开课时间：2019-12-20 10:00');
        $('#tag-type').html('难度：困难');
        $('#btn-play').click(function () {
            jump('./views/live/template/video');
        });
    }

    function initLive() {
        $('#btn-play').show();
        $('#btn-exam').hide();

        $('#tag-title').html('【直播】平面设计系列课程-01');
        $('#tag-time').html('开课时间：2019-12-20 10:00');
        $('#tag-type').html('难度：困难');
        $('#btn-play').click(function () {
            jump('./views/live/template/live');
        });
    }

    function initExam() {
        $('#btn-play').hide();
        $('#btn-exam').hide();

        $('#tag-title').html('【考核】造型设计基础考核01');
        $('#tag-time').html('考试时间：2019-12-20 10:00&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;考试地点：5楼机房');
        $('#tag-type').html('考试类型：实战');
        $('#tab3').html('考核要求');
    }

    function initExamOnline() {
        $('#btn-play').hide();
        $('#btn-exam').show();

        $('#tag-title').html('【在线考核】造型设计基础考核02');
        $('#tag-time').html('考试时间：2019-12-20 10:00&nbsp;考试地点：5楼机房');
        $('#tag-type').html('考试类型：在线');
        $('#tab3').html('考核要求');

        $('#btn-exam').click(function () {
            jump('./views/static/paper/template/question_detail');
        });
    }

    // tab点击事件
    var descDiv = $('#desc');
    var dictDiv = $('#dict');
    var dictWork = $('#work');
    $(".tab").find('a').click(function () {
        checkedTab($(this).prop('id'));
    });

    function checkedTab(tab) {
        $(".tab").find('a').removeClass('tab-selected');
        $(".tab #" + tab).addClass('tab-selected');
        switch (tab) {
            case 'tab1':
                descDiv.show();
                dictDiv.hide();
                dictWork.hide();
                break;
            case 'tab2':
                descDiv.hide();
                dictDiv.show();
                dictWork.hide();
                break;
            case 'tab3':
                descDiv.hide();
                dictDiv.hide();
                dictWork.show();
                break;
        }
    }

    // // 取消
    // $('#btn-cancel').click(function () {
    //     $('#add-dialog').hide();
    // });
    // // 新建目录
    // $('#btn-add-dir').click(function () {
    //     showDialog();
    // });
    //
    // // 显示添加课程目录对话框
    // function showDialog() {
    //     $('#add-dialog').show();
    // }
    //
    // //加载课程信息
    // function loadCourseData() {
    //     $.ajax({
    //         url: context + '/api/educourse/getOne?course_id=' + parentId,
    //         type: 'GET',
    //         success: function (result) {
    //             if (result.success) {
    //                 parentInfo = result.data;
    //                 $('#big-title').html(parentInfo.course_task);
    //                 $('#cover').attr('src', parentInfo.resource_url);
    //                 var content = parentInfo.course_introduction !== undefined ? parentInfo.course_introduction : '';
    //                 $('#desc').html(content);
    //                 ue.ready(function () {
    //                     //设置默认值
    //                     ue.setContent(content);
    //                 });
    //             } else {
    //                 layer.msg(result.msg);
    //             }
    //         },
    //         error: function () {
    //             layer.msg("获取失败");
    //         }
    //     });
    // }
    //
    // //加载目录
    // function loadDirData() {
    //     $.ajax({
    //         url: context + '/api/educourse/getTask?course_id=' + parentId,
    //         type: 'GET',
    //         success: function (result) {
    //             if (result.success) {
    //                 var data = result.data;
    //                 createPlayListItem(data);
    //                 createDetailListItem(data);
    //                 createEditDetailListItem(data);
    //             } else {
    //                 layer.msg(result.msg);
    //             }
    //         },
    //         error: function () {
    //             layer.msg("获取失败");
    //         }
    //     });
    // }
    //
    // //播放器目录
    // function createPlayListItem(data) {
    //     var list = $('#play-list');
    //     list.empty();
    //     for (var i = 0; i < data.length; i++) {
    //         var li = '<li class="item"> <p class="title">' + data[i].course_task + '</p>\n';
    //         if (data[i].course_state === 1) {
    //             li += '<p class="link" id="' + i + '"><span class="status-select">' + courseStatus[data[i].course_state] + '</span><a>' + data[i].course_task + ')<br><span  class="time">37分钟</span></a></p>';
    //         } else {
    //             var res = data[i].resource_url;
    //             if (res !== undefined && res.length > 1) {
    //                 var resUrls = res.split(',');
    //                 for (var j = 0; j < resUrls.length; j++) {
    //                     li += '<p class="link"><span class="status-select">' + courseStatus[data[i].course_state] + '</span><a>' + data[i].course_task + '(' + (j + 1) + ')<br><span  class="time">37分钟</span></a></p>';
    //                 }
    //             }
    //         }
    //         li += '</li>';
    //         list.append(li);
    //     }
    //
    //     //点击播放
    //     list.find('.link').click(function () {
    //         var index = $(this).prop('id');
    //         var id = data[index].course_id;
    //         jump('./views/live/template/live[id=' + id + ']');
    //     });
    //
    // }
    //
    // //详情目录
    // function createEditDetailListItem(data) {
    //     var list = $('#editlist');
    //     list.empty();
    //     for (var i = 0; i < data.length; i++) {
    //         var li = '    <li class="item" id="' + i + '"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
    //             '                        class="handler">\n' +
    //             // '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
    //             '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
    //             '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
    //             '                    </span>\n';
    //
    //         var res = data[i].resource_url;
    //         if (res !== undefined && res.length > 1) {
    //             var resUrls = res.split(',');
    //             for (var j = 0; j < resUrls.length; j++) {
    //                 li += ' <p class="res"><i class="iconfont icon-bofang"></i>' + data[i].course_task + '(' + (j + 1) + ')</p>';
    //             }
    //         }
    //         li += '</li>';
    //         list.append(li);
    //     }
    //
    //     // 显示隐藏操作
    //     list.find('li').mouseenter(function () {
    //         $(this).find('span.handler').show();
    //     });
    //     list.find('li').mouseleave(function () {
    //         $(this).find('span.handler').hide();
    //     });
    //     // 添加
    //     list.find('.desc.html').click(function () {
    //         isEdit = false;
    //         showDialog();
    //     });
    //     // 编辑
    //     list.find('.edit').click(function () {
    //         isEdit = true;
    //         editCourse = data[$(this).parents('li').prop('id')];
    //         $('#title').val(editCourse.course_task);
    //         $('#status').val(editCourse.course_state);
    //         $('#startDate').val(editCourse.startTime);
    //         $('#endingDate').val(editCourse.endTime);
    //         $('#easy').val(editCourse.ease);
    //         showDialog();
    //     });
    //     // 删除
    //     list.find('.del').click(function () {
    //         var index = $(this).parents('li').prop('id');
    //         layer.confirm('确认删除此目录？', {
    //             icon: 7,
    //             title: "提示",
    //             btn: ['确认', '取消'] //按钮
    //         }, function () {
    //             $.ajax({
    //                 url: context + '/api/educourse/' + data[index].course_id,
    //                 type: "DELETE",
    //                 success: function (result) {
    //                     if (result.success && result.data > 0) {
    //                         layer.msg("删除成功");
    //                         loadDirData();
    //                     } else {
    //                         layer.msg(result.msg);
    //                     }
    //                 },
    //                 error: function () {
    //                     layer.msg("删除异常");
    //                 }
    //             })
    //         }, function () {
    //             layer.closeAll();
    //         });
    //     });
    // }
    //
    // //详情目录
    // function createDetailListItem(data) {
    //     var list = $('#list');
    //     list.empty();
    //     for (var i = 0; i < data.length; i++) {
    //         var li = '<li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span>';
    //         var res = data[i].resource_url;
    //         if (res !== undefined && res.length > 1) {
    //             var resUrls = res.split(',');
    //             for (var j = 0; j < resUrls.length; j++) {
    //                 li += ' <p class="res"><i class="iconfont icon-bofang"></i>' + data[i].course_task + '(' + (j + 1) + ')</p>';
    //             }
    //         }
    //         li += '</li>';
    //         list.append(li);
    //     }
    // }
    //
    //
    // //新建目录
    // function createOrEditItem(data) {
    //     var title = $('#title');
    //     var status = $('#status');
    //     var startTime = $('#startDate');
    //     var endTime = $('#endingDate');
    //     var easy = $('#easy');
    //     if (window.util.isEmpty(title.val())) {
    //         title.focus();
    //         layer.msg("标题不能为空")
    //         return;
    //     }
    //     if (window.util.isEmpty(startTime.val())) {
    //         startTime.focus();
    //         layer.msg("选择开始时间");
    //         return;
    //     }
    //     if (window.util.isEmpty(endTime.val())) {
    //         endTime.focus();
    //         layer.msg("选择结束时间");
    //         return;
    //     }
    //
    //     if (isEdit) {
    //         $.ajax({
    //             url: context + '/api/educourse/updateOne',
    //             type: 'PATCH',
    //             dataType: 'json',
    //             contentType: "application/json;charset-UTF-8",
    //             data: JSON.stringify(data),
    //             success: function (result) {
    //                 if (result.success) {
    //                     $('#add-dialog').hide();
    //                     loadDirData();
    //                 } else {
    //                     layer.msg(result.msg);
    //                 }
    //             },
    //             error: function () {
    //                 layer.msg("添加失败");
    //             }
    //         });
    //     } else {
    //         $.ajax({
    //             url: context + '/api/educourse/insertOne',
    //             type: 'POST',
    //             dataType: 'json',
    //             contentType: "application/json;charset-UTF-8",
    //             data: JSON.stringify(data),
    //             success: function (result) {
    //                 if (result.success) {
    //                     $('#add-dialog').hide();
    //                     loadDirData();
    //                 } else {
    //                     layer.msg(result.msg);
    //                 }
    //             },
    //             error: function () {
    //                 layer.msg("添加失败");
    //             }
    //         });
    //     }
    // }
    //
    // //编辑课程描述
    // function updateDetailDesc() {
    //     var content = ue.getContent();
    //     if (content.length === 0) {
    //         layer.msg('请填写课程介绍');
    //         return;
    //     }
    //     var data = {
    //         course_id: parentInfo.course_id,
    //         hash: parentInfo.hash,
    //         course_introduction: content
    //     };
    //     $.ajax({
    //         url: context + '/api/educourse/updateOne',
    //         type: 'PATCH',
    //         dataType: 'json',
    //         contentType: "application/json;charset-UTF-8",
    //         data: JSON.stringify(data),
    //         success: function (result) {
    //             if (result.success) {
    //                 loadCourseData();
    //             } else {
    //                 layer.msg(result.msg);
    //             }
    //         },
    //         error: function () {
    //             layer.msg("添加失败");
    //         }
    //     });
    // }

</script>
